<template>
  <!-- 知识点弹窗 -->
  <div>
    <el-dialog
      :model-value="showknowledge"
      :show-close="false"
      :close-on-click-modal="true"
      class="summaryContent"
      @closed="summaryClose"
    >
      <template #header>
        <div
          class="dialogHeader font-size-18 font-weight-600 color-00085 display-flex flex-between"
        >
          <div>知识点</div>
          <img
            class="dialogClose cursor-pointer"
            src="@/assets/images/dialogClose.png"
            alt=""
            @click="summaryClose"
          />
        </div>
      </template>
      <div class="summaryDetail color-00085">
        <p class="font-size-20 font-weight-500 margin-bottom-16">
          {{ knowledgeDetail?.name }}
        </p>
        <p class="font-size-14">
          {{ knowledgeDetail?.startTime }}-{{ knowledgeDetail?.endTime }}
        </p>
        <p class="knowledgeContent">{{ knowledgeDetail?.memo }}</p>
      </div>
      <!-- 背景图片 -->
      <img class="scanCode-bg" src="@/assets/images/scanCodePg.png" alt="" />
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
// 声明要触发的自定义事件
const emits = defineEmits(['closeknowledgeDialog'])
// 声明要接收的参数
const props = defineProps({
  showknowledge: {
    type: Boolean,
    default: false
  },
  knowledgeDetail: {
    type: Object,
    default: () => {}
  }
})
const summaryClose = () => {
  // 通过 emit 通知父组件更新 isDialog
  // emits('isDialog', false)
  // 触发自定义事件，并传递新的值
  emits('closeknowledgeDialog', false)
}
</script>

<style lang="scss">
.summaryContent {
  width: 640px;
  height: 406px;
  padding: 0px;
  position: relative;
}
.knowledgeContent {
  margin-top: 10px;
  line-height: 30px;
}
.scanCode-bg {
  position: absolute;
  bottom: 0px;
  right: 0px;
}
</style>
